<template>
    <div>
        <searchBox @searchChange = "searchChange" />
        <div class="gva-table-box">
        <el-card>
            <template #header>数据概览</template>
            <el-row  style="margin:30px auto">
                <!-- <el-col :span="2"></el-col> -->
                <el-col :span="4">
                    <el-statistic title="买量消耗(元)" precision="2" :value="issuerData.expense" />
                </el-col>
                <el-col :span="4">
                    <el-statistic title="视频发布量" precision="2" :value="issuerData.video_post" />
                </el-col>
                <el-col :span="4">
                    <el-statistic title="视频播放量"  :value="issuerData.video_play_settle"/>
                </el-col>
                <el-col :span="4">
                    <el-statistic title="买量用户数(元)" precision="2" :value="issuerData.dau_v2_settle" />
                </el-col>
                <el-col :span="4">
                    <el-statistic title="广告收入(元)" precision="2" :value="issuerData.ad_income_settle" />
                </el-col>
                <el-col :span="4">
                    <el-statistic title="内购收入(元)" precision="2" :value="issuerData.order_income_settle" />
                </el-col>
                <!-- <el-col :span="2"></el-col> -->
            </el-row>
        </el-card>
    </div>
    <div class="gva-table-box">
      <lineChart ref="totalUser" :title="chartData.title" :legend="chartData.legend" :xAxis="chartData.xAxis" :series="chartData.series"> </lineChart>
    </div>
    <div class="gva-table-box">
      <div class="gva-btn-list">
        <el-text class="mx-1" size="large">发行人计划数据</el-text>
      </div>
        <el-table
        ref="multipleTable"
        style="width: 100%"
        tooltip-effect="dark"
        row-key="ID"
        :data="tableData"
        :height="tableData.length > 10 ? 600 : null"
        border
      >

        <el-table-column
          align="left"
          label="日期"
          prop="date"
        />
        <el-table-column
          align="left"
          label="买量消耗(元)"
          prop="expense"
        >
        </el-table-column>
        <el-table-column
          align="left"
          label="视频发布量"
          prop="video_post"
        />
        <el-table-column
          align="left"
          label="视频结算量"
          prop="video_play_settle"
        />
        <el-table-column
          align="left"
          label="买量用户数(元)"
          prop="dau_v2_settle"
        />
        <el-table-column
          align="left"
          label="广告收入(元)"
          prop="ad_income_settle"
        />
        <el-table-column
          align="left"
          label="内购收入(元)"
          prop="order_income_settle"
        >
        </el-table-column>
      </el-table>
    </div>
        </div>
    </template>  
    <script lang="ts" setup>
    import { ref,watch } from 'vue'
    import lineChart from '../../components/echarts/lineChart.vue';
    import searchBox from '../../components/search/searchBox.vue';
    import { useTransition } from '@vueuse/core'
    import type { TabsPaneContext } from 'element-plus';
    import {
        getHugeList
} from '@/api/openApi'
import { sumByKey } from '../../utils/fmtData'
// =========== 表格控制部分 ===========
const tableData = ref([])
const searchInfo = ref({})


var searchChange = function(date){
  searchInfo.value = date
  getTableData()
}

// 查询
const chartData = ref({
  xAxis: [],
  series: [{
    name: '买量消耗(元)',
    type: 'line',
    data: []
  },{
    name: '视频发布量',
    type: 'line',
    data: []
  },{
    name: '视频结算量',
    type: 'line',
    data: []
  },{
    name: '买量用户数',
    type: 'line',
    data: []
  },{
    name: '广告收入(元)',
    type: 'line',
    data: []
  },{
    name: '内购收入(元)',
    type: 'line',
    data: []
  }],
  legend: ['买量消耗(元)','视频发布量', '视频结算量','买量用户数','广告收入(元)', '内购收入(元)'],
  title: '发行人计划'
})

const issuerData = ref({
  expense: 0,
  video_post: 0,
  video_play_settle: 0,
  dau_v2_settle: 0,
  ad_income_settle: 0,
  order_income_settle: 0
})
const getTableData = function() {
  getHugeList({  type: 'issuer', ...searchInfo.value }).then(res=>{
    if (res.code === 0) {
      tableData.value = []
      issuerData.value = {
        expense: 0,
        video_post: 0,
        video_play_settle: 0,
        dau_v2_settle: 0,
        ad_income_settle: 0,
        order_income_settle: 0
      }
      let arr = []
      chartData.value.xAxis = []
      chartData.value.series[0].data = []
      chartData.value.series[1].data = []
      chartData.value.series[2].data = []
      chartData.value.series[3].data = []
      chartData.value.series[4].data = []
      chartData.value.series[5].data = []
      res.data.list.forEach(element => {
        let jsonData = JSON.parse(element.response)
        let expense = Number((jsonData.expense / 100).toFixed(2))
        let video_post = Number(jsonData.videoPost)
        let video_play_settle = Number(jsonData.videoPlaySettle)
        let dau_v2_settle = Number(jsonData.dauV2Settle / 100).toFixed(2)
        let ad_income_settle = Number(jsonData.adIncomeSettle / 100).toFixed(2)
        let order_income_settle = Number(jsonData.orderIncomeSettle / 100).toFixed(2)

        arr.push({
          date: element.date,
          expense: expense,
          video_post: video_post,
          video_play_settle: video_play_settle,
          dau_v2_settle: dau_v2_settle,
          ad_income_settle: ad_income_settle,
          order_income_settle: order_income_settle
        })
        chartData.value.xAxis.push(element.date)
        chartData.value.series[0].data.push(expense)
        chartData.value.series[1].data.push(video_post)
        chartData.value.series[2].data.push(video_play_settle)
        chartData.value.series[3].data.push(dau_v2_settle)
        chartData.value.series[4].data.push(ad_income_settle)
        chartData.value.series[5].data.push(order_income_settle)
      });
      
      tableData.value = sumByKey(arr,'date')
      //循环算出来每一项的总和
      tableData.value.forEach(item=>{
        issuerData.value.expense += Number(item.expense)
        issuerData.value.video_post += Number(item.video_post)
        issuerData.value.video_play_settle += Number(item.video_play_settle)
        issuerData.value.dau_v2_settle += Number(item.dau_v2_settle)
        issuerData.value.ad_income_settle += Number(item.ad_income_settle)
        issuerData.value.order_income_settle += Number(item.order_income_settle)
      })

    }
  })
}

    
</script>      
<style>
.el-col {
    text-align: center;
}
</style>